<template>
  <div class="attention-mid">

      <div class="attention-Dialog">

        <p @click="showPopup" >
          <img :src="require('../image/zu59.png')" alt=""> 
          邀请规则
          </p>
          
      </div>
  <!-- 弹出层 -->
     <van-popup v-model="show"
      round position="center" 
      :closeable="false"
      :style="{ height: '748px',width: '550px' }"
      :close-on-click-overlay="false"
      >
       <h1>邀请规则</h1>
       <div class="show_content">
          <p>1、每邀请一个新用户首次成功授权小程序，奖励20积分</p>
          <p>2、每天最多邀请50人</p>
          <p>3、已经是透明标签小程序的用户，邀请册无效，没有积分累计增加</p>
          <p>4、邀请数据若没有即使更新，请耐心稍等等一下噢，可能存在缓存问题呢~5、邀请规则透明标签可在法律规范允许内对本规则进行调整变动。</p>

       </div>
       <div class="showClose" @click="showClose">知道啦</div>
     </van-popup>


      <van-grid>
        <van-grid-item v-for="(item, index) in list" :key="index" >
          <div class="attention-Dialog-img">
              <img :src="require('../image/xinfeng.png')" alt=""/>
          </div>
         
            <p>邀请好友 获得积分奖励</p>
            <div class="inviteMy">我的邀请码</div>
            
            <div class="inviteCode" 
            >
            {{item.inviteCode}}</div>
            <van-cell title="复制邀请码分享好友"
             @click="showShare_Copy(item.inviteCode)" />
             <van-share-sheet
              v-model="showShare"
              title="立刻分享给好友"
              :options="options"
              @select="onSelect"
            />
        </van-grid-item>


      </van-grid>
      
      <InviteNumber/>
      
  </div>
</template>

<script>
import { Toast } from 'vant';
import InviteNumber from './inviteNumber.vue';


export default {
    data() {
        return {
            list: [
                { inviteCode: "JJ4SbXqq", }
            ],
            showShare: false,
            show: false,
            options: [
                [
                    { name: "微信", icon: "wechat" },
                    { name: "朋友圈", icon: "wechat-moments" },
                    { name: "微博", icon: "weibo" },
                    { name: "QQ", icon: "qq" },
                ],
            ],
        };
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        showClose() {
            this.show = false;
        },
        showShare_Copy(row) {
            setTimeout(() => {
                // 分享页面1秒后出现
                this.showShare = true;
            }, 1000);
            // 获取复制的邀请码
            this.list.inviteCode = row,
                // console.log(this.list.inviteCode)
                Toast.success("复制成功");
        },
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        }
    },
    components: { InviteNumber }
}
</script>

<style lang="scss" >
.attention-mid{
  width: 100%;
  height: 1440px;
  background: #87A3F7;
  //  margin-top: 151px
  position:relative;
  .van-popup{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-between;
    .show_content{
      width: 510px;
      height: 465px;
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      line-height: 54px;
    }
  }

  .attention-Dialog{
    display: grid;
    justify-items: end;
    padding-top: 36px;
    p{
      display: inline-block;
      width: 236px;
      height: 48px;
      font-size: 2.125rem;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      img{
        width: 30px;
        height: 30px;
        margin-right: 10px;
     }
    }
  }
  // .van-popup{
  //   width: 550px;
  //   height: 748px;
  // }
  
  .van-grid{
    width: 40.75rem;
    height: 47.75rem;
    background: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
    justify-content: center;
    margin: 3rem;
   

    /* 白框整体居中 */
    .van-grid-item{
       border-radius: 20px 20px 20px 20px;
        .van-grid-item__content--center{
        flex-direction: row;
        flex-wrap: wrap;
       border-radius: 20px 20px 20px 20px;

      }      
      .van-cell{
        width: 40.75rem;
        height: 5.625rem;

       .van-cell__title{
        width: 28.75rem;
        background: #87A3F7;
        border-radius: 44px 44px 44px 44px;
        span{
          // 复制邀请码设置
        width: 18rem;
        height: 2.8125rem;
        font-size: 2rem;
        // padding-top: 10px;
        padding-left:10.5rem;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 5.5rem;
        }
        
      }
        
     }
    }
    .attention-Dialog-img{
      img{
      width:15.375rem;
      height: 16rem;
      }
    }
    
    P{
       width:40.75rem;
      height: 3rem;
      font-size: 2.125rem;
      font-family: PingFangSC-Medium-, PingFangSC-Medium;
      font-weight: normal;
      color: #2F2F2F;
      text-align:center;
      font-weight: 400;
    }
    .inviteMy{
      display: block;
      width:40.75rem;
      height: 2.625rem;
      font-size: 1.875rem;
      text-align: center;
      color: #666666;
    }

    .inviteCode{
      width: 11.875rem;
      height: 3.5rem;
      font-size: 2.5rem;
    }
  }
  .showClose{
    width: 288px;
    height: 70px;
    background: #87A3F7;
    border-radius: 10px 10px 10px 10px;
    text-align: center;
    line-height: 4.375rem;
    color: #FFFFFF;
    font-size: 2rem;
  }
   
   
}
</style>